<script setup>
import breadCrumb from '../head/breadCrumb.vue';


const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>

<template>
<!-- 顶部内容 -->
<breadCrumb></breadCrumb>
<!-- 搜索功能 -->
<div class="head_border">
    <el-row :gutter="20">
        <el-col :span="7">
            岗位名称 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="用户名/姓名/电话号码" />
        </el-col>
        <el-col :span="8">
            岗位编码 &nbsp; 
            <el-select v-model="value" placeholder="请选择" style="width: 300px">
                <el-option></el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            状态 &nbsp; 
            <el-select v-model="value" placeholder="请选择" style="width: 300px">
                <el-option></el-option>
            </el-select>
        </el-col>
    </el-row>

    <br>

    <el-row :gutter="20">
        <el-col span="8">
            <el-button type="primary" icon="Search">搜索</el-button>
            <el-button >重置</el-button>
        </el-col>
    </el-row>

</div>

<!-- 添加功能 -->
<el-row class="main_border">
    <el-col>
      <el-button type="success" icon="plus" @click="dialogVisible = true">添加</el-button>
    </el-col>
</el-row >

<!-- 表格的渲染 -->
<el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="序号" width="100" />
    <el-table-column prop="name" label="岗位名称" width="200" />
    <el-table-column prop="address" label="岗位编号" width="200" />
    <el-table-column prop="address" label="状态" width="180">
        <el-switch v-model="status" />
    </el-table-column>
    <el-table-column prop="address" label="创建时间" width="300" />
    <el-table-column prop="address" label="操作" width="252" />
  </el-table>

  <!-- 底部分页栏 -->
<div class="pagination-container">
    <el-pagination
        size="small"
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5,10,20,30,40,50,100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next, jumper"
        :total="10"
        @size-change="tableData"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<style scoped>
.head_border{
    border: 1px solid rgb(223, 223, 223);
    padding: 10px;
}

.main_border{
    border: 1px solid rgb(223, 223, 223);
    margin-top: 5px;
    padding: 10px;
}

.el-table{
    margin-top: 5px;
    margin-bottom: 20px;
}

.pagination-container {
    display: flex;
    justify-content: center;
}
</style>